<template>
    <div v-if="nav !== 'withdraw'" class="account-item clearfix" style="flex-wrap: nowrap;">
        <div v-if="avatar" class="avatar-wrap fl">
            <img class="avatar" :src="avatar" alt=""/>
        </div>
        <div class="list-item-right large-text" style="width: 145rpx;">
            <div class="money font-bold" style="text-align: right;">+{{moneyText}}</div>
            <div class="giveBtn" v-if="status == 'issued' && istransfer == 0" @click="onGive">转赠好友</div>
        </div>
        <div class="list-item-content" style="width:450rpx;">
            <div class="name-wrap normal-text hidden-text" v-if="nickname">
                <div class="name hidden-text">{{nickname}}</div>
                <span v-if="referrer" class="fr">&nbsp;推荐人:{{referrer}}</span>
            </div>
            <div class="content-time small-text hidden-text">{{title}}&nbsp;&nbsp;{{price}}</div>
            <div class="shop hidden-text small-text">{{createdAt || ''}}</div>
        </div>
        <!-- 当前为赠送的-则显示 -->
        <div class="gift" v-if="friendGive && istransfer == 1">来自您的好友{{friendGive}}的赠予的提现金额</div>
    </div>
    <div v-else class="account-item clearfix">
        <div class="list-item-content fl">
            <div class="name-wrap normal-text hidden-text">{{channel === 'bank' ? title : ''}}&nbsp;&nbsp;{{no}}</div>
            <div class="content-time small-text hidden-text">{{withdrawStatus}}</div>
            <div class="shop hidden-text small-text">
                提现时间{{createdAt}}
            </div>
        </div>
        <div class="list-item-right large-text">
            <div class="money">{{moneyText}}</div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    currency,
    // dateDiff,
    // dateNow,
    // dateParse,
} from '@/lib/utils';

import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
    name: 'AccountItem',
})
export default class AccountItem extends Vue {
    @Prop({ type: String }) public action: any;
    // 头像
    @Prop({ type: String }) public avatar: any;
    // 昵称
    @Prop({ type: String }) public nickname: any;
    // 推荐人
    @Prop({ type: String }) public referrer: any;
    // 主文本
    @Prop({ type: String }) public title: any;
    // 副文本
    @Prop({ type: String }) public desc: any;
    // 时间
    @Prop({ type: String }) public createdAt: any;
    // 单价
    @Prop({ type: Number }) public price: any;
    // 金额
    @Prop({ type: Number }) public money: any;
    // 状态
    @Prop({ type: String }) public status: any;
    // 当前是哪种列表
    @Prop({ type: String }) public nav: any;
    /** 提现方式 */
    @Prop({ type: String, default: '' }) public channel: any;
    /** 提现账号 */
    @Prop({ type: String, default: '' }) public no: any;

    // id
    @Prop({ type: Number }) public id: any;
    // 好友赠送的，好友昵称
    @Prop({ type: String }) public friendGive: any;
    // 是否有转赠操作的记录，判断显示转赠提示内容
    @Prop({ type: String }) public istransfer: any;

    public get moneyText() {
        return currency(this.money);
    }

    /** 剩余天数 */
    // remainDay() {
    //     const day = 14 - dateDiff(dateParse(this.time), dateNow());
    //     if (day > 1) {
    //         return day + '天后发';
    //     } else if (day === 1) {
    //         return '明天发';
    //     } else {
    //         return '';
    //     }
    // },
    /** 提现状态 */
    public get withdrawStatus() {
        if (this.nav === 'withdraw' && this.status) {
            return this.status === 'init' ? '提现中' : this.status === 'success' ? '提现成功' : this.status === 'fail' ? '提现失败' : null;
        } else {
            return '';
        }
    }

    public onClickAction() {
        this.$emit('action');
    }

    // 赠送好友
    public onGive(){
        this.$emit('onGive',this.id)
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.account-item {
    position: relative;
    padding: 10px 0;

    .gift{
        width: 100%;
        // height: 50rpx;
        // line-height: 50rpx;
        background-color: #f3f4f6;
        color: #bfc0c2;
        border-radius: 10rpx;
        box-sizing: border-box;
        // padding-left: 20rpx;
        margin-top: 10rpx;
        font-size: 22rpx;
        line-height: 32rpx;
        padding: 10rpx;
    }
    .giveBtn{
        background-color: #FF7171;
        color: #ffffff;
        text-align: center;
        font-size: 30rpx;
        padding: 3rpx 10rpx;
        box-sizing: border-box;
        border-radius: 10rpx;
        margin-top: 14rpx;
    }

    .avatar {
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
        background-color: @image-bg;
    }
    .list-item-content {
        padding-left: 10px;
        width: 460rpx;
        box-sizing: border-box;
        .content-time, .shop {
            color: #9b9b9b;
        }
        .name-wrap {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            .name {
                max-width: 200rpx;
            }
            .color-red {
                padding-left: 10px;
                color: #E23B3D;
            }
        }
    }
    .list-item-right {
        color: #FF9800;
        .money {
            .font-bold();
        }
    }
}

</style>
